<template>
    <div>
        <div><Banner></Banner></div>
        <div>
            <ul>
                <li>
                    <router-link replace to="/home" active-class="active">Home</router-link>""
                </li>
                <li><router-link replace to="/about" active-class="active">About</router-link></li>
            </ul>
        </div>
        <div>
            <!-- keep-alive防止组件被销毁，include写要缓存的组件名 -->
            <!-- 如果没有include则会缓存所有展示 -->
            <!-- keep-alive只能包裹在router-view的外面 -->
            <!-- <keep-alive include="Home"> -->
            <!-- 缓存多个用数组 -->
            <keep-alive include="['Home','About']">
                <router-view></router-view>
            </keep-alive>
        </div>
    </div>
</template>

<script>
    import Banner from './components/Banner.vue'
    export default {
        name : "App",
        components:{
            Banner
        },
    }
</script>
